<template>
  <div class="merchant-apply-container">
    <!-- 面包屑导航 -->
    <div
      class="container mx-auto px-4 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"
    >
      <Breadcrumb
        :items="[{ path: '/', title: '首页' }, { title: '商家入驻' }]"
      />
    </div>

    <!-- 页面头部 -->
    <div class="page-header bg-white dark:bg-gray-800 shadow-sm">
      <div class="container mx-auto px-4 py-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
              商家入驻
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2">
              加入贵港文化旅游平台，开启您的商业之旅
            </p>
          </div>
          <el-button type="primary" @click="showQueryDialog">
            <el-icon class="mr-1"><Search /></el-icon>
            查询申请状态
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content bg-gray-50 dark:bg-gray-900 min-h-screen py-8">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row gap-8">
          <!-- 左侧主要内容 -->
          <div class="flex-1">
            <!-- 商家类型选择 -->
            <section class="content-card mb-8">
              <h2
                class="text-xl font-semibold text-gray-700 dark:text-white mb-6"
              >
                选择商家类型
              </h2>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div
                  class="merchant-type-card cursor-pointer p-6 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-300"
                  :class="[
                    merchantType === 'mall'
                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
                      : 'bg-white dark:bg-gray-800',
                  ]"
                  @click="handleTypeSelect('mall')"
                >
                  <div class="flex items-center mb-4">
                    <div class="icon-wrapper">
                      <i
                        class="fas fa-store text-xl text-blue-600 dark:text-blue-400"
                      ></i>
                    </div>
                    <div class="ml-4">
                      <h3 class="text-xl font-semibold">文创商城商家</h3>
                      <p class="text-sm text-gray-600 dark:text-gray-400">
                        适合文创产品、特产、手工艺品等商家
                      </p>
                    </div>
                  </div>
                  <ul
                    class="text-sm text-gray-600 dark:text-gray-400 space-y-2"
                  >
                    <li>零售类商品销售</li>
                    <li>文创产品展示</li>
                    <li>特产商品销售</li>
                  </ul>
                </div>

                <div
                  class="merchant-type-card cursor-pointer p-6 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-300"
                  :class="[
                    merchantType === 'hotel'
                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
                      : 'bg-white dark:bg-gray-800',
                  ]"
                  @click="handleTypeSelect('hotel')"
                >
                  <div class="flex items-center mb-4">
                    <div class="icon-wrapper">
                      <i
                        class="fas fa-hotel text-xl text-blue-600 dark:text-blue-400"
                      ></i>
                    </div>
                    <div class="ml-4">
                      <h3 class="text-xl font-semibold">酒店商家</h3>
                      <p class="text-sm text-gray-600 dark:text-gray-400">
                        适合酒店、民宿、客栈等住宿类商家
                      </p>
                    </div>
                  </div>
                  <ul
                    class="text-sm text-gray-600 dark:text-gray-400 space-y-2"
                  >
                    <li>住宿服务</li>
                    <li>餐饮服务</li>
                    <li>会议场地</li>
                  </ul>
                </div>
              </div>
            </section>

            <!-- 平台优势 -->
            <section class="content-card mb-8">
              <h2
                class="text-xl font-semibold text-gray-700 dark:text-white mb-6"
              >
                平台优势
              </h2>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="advantage-card">
                  <div class="icon-wrapper bg-green-100 dark:bg-green-900/30">
                    <i
                      class="fas fa-chart-line text-green-600 dark:text-green-400"
                    ></i>
                  </div>
                  <h3 class="text-lg font-semibold mt-4">流量扶持</h3>
                  <p class="text-gray-600 dark:text-gray-400 mt-2">
                    新店铺专享流量扶持政策，帮助商家快速成长
                  </p>
                </div>
                <div class="advantage-card">
                  <div class="icon-wrapper bg-purple-100 dark:bg-purple-900/30">
                    <i
                      class="fas fa-hand-holding-usd text-purple-600 dark:text-purple-400"
                    ></i>
                  </div>
                  <h3 class="text-lg font-semibold mt-4">低费率</h3>
                  <p class="text-gray-600 dark:text-gray-400 mt-2">
                    平台收取低于行业平均的服务费率，助力商家提升利润
                  </p>
                </div>
                <div class="advantage-card">
                  <div class="icon-wrapper bg-yellow-100 dark:bg-yellow-900/30">
                    <i
                      class="fas fa-tools text-yellow-600 dark:text-yellow-400"
                    ></i>
                  </div>
                  <h3 class="text-lg font-semibold mt-4">运营支持</h3>
                  <p class="text-gray-600 dark:text-gray-400 mt-2">
                    提供专业的运营指导和培训服务，助力商家成功
                  </p>
                </div>
              </div>
            </section>

            <!-- 常见问题 -->
            <section class="content-card">
              <h2
                class="text-xl font-semibold text-gray-700 dark:text-white mb-6"
              >
                常见问题
              </h2>
              <el-collapse>
                <el-collapse-item title="入驻需要哪些资质？" name="1">
                  <div class="text-gray-600 dark:text-gray-400">
                    <p>基础资质要求：</p>
                    <ul class="list-disc pl-4 mt-2">
                      <li>营业执照（经营范围需符合平台要求）</li>
                      <li>法人身份证正反面</li>
                      <li>商标注册证（如有）</li>
                      <li>行业资质许可（根据经营类目要求提供）</li>
                    </ul>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="入驻审核需要多久？" name="2">
                  <div class="text-gray-600 dark:text-gray-400">
                    <p>
                      正常情况下，资料提交完整的情况下1-3个工作日内完成审核。如资料不完整或需要补充，会相应延长审核时间。
                    </p>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="入驻收费标准是怎样的？" name="3">
                  <div class="text-gray-600 dark:text-gray-400">
                    <p>平台采用阶梯式收费标准：</p>
                    <ul class="list-disc pl-4 mt-2">
                      <li>基础保证金：1000元（可退）</li>
                      <li>技术服务费：0.5%-3%（具体费率根据经营类目确定）</li>
                      <li>新店铺前3个月免收技术服务费</li>
                    </ul>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </section>
          </div>

          <!-- 右侧侧边栏 -->
          <div class="md:w-80">
            <!-- 入驻流程 -->
            <div class="content-card sticky top-4">
              <h2
                class="text-xl font-semibold text-gray-700 dark:text-white mb-6"
              >
                入驻流程
              </h2>
              <div class="space-y-6">
                <div class="process-step">
                  <div class="step-number">1</div>
                  <div class="step-content">
                    <h3 class="step-title">提交资料</h3>
                    <p class="step-desc">填写基本信息并上传相关证照</p>
                  </div>
                </div>
                <div class="process-step">
                  <div class="step-number">2</div>
                  <div class="step-content">
                    <h3 class="step-title">资质审核</h3>
                    <p class="step-desc">平台审核商家资质（1-3个工作日）</p>
                  </div>
                </div>
                <div class="process-step">
                  <div class="step-number">3</div>
                  <div class="step-content">
                    <h3 class="step-title">签约合作</h3>
                    <p class="step-desc">双方确认并签署合作协议</p>
                  </div>
                </div>
                <div class="process-step">
                  <div class="step-number">4</div>
                  <div class="step-content">
                    <h3 class="step-title">开店培训</h3>
                    <p class="step-desc">参加平台商家培训课程</p>
                  </div>
                </div>
                <div class="process-step">
                  <div class="step-number">5</div>
                  <div class="step-content">
                    <h3 class="step-title">开始运营</h3>
                    <p class="step-desc">完成培训后正式开始运营</p>
                  </div>
                </div>
              </div>

              <!-- 联系我们 -->
              <div
                class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700"
              >
                <h3
                  class="text-lg font-semibold text-gray-700 dark:text-white mb-4"
                >
                  联系我们
                </h3>
                <div class="space-y-3 text-gray-600 dark:text-gray-400">
                  <p class="flex items-center">
                    <i class="fas fa-phone-alt mr-2"></i>
                    商家服务热线：400-888-8888
                  </p>
                  <p class="flex items-center">
                    <i class="fas fa-envelope mr-2"></i>
                    商务合作邮箱：bd@example.com
                  </p>
                  <p class="flex items-center">
                    <i class="fas fa-clock mr-2"></i>
                    服务时间：周一至周日 9:00-18:00
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 查询状态对话框 -->
    <el-dialog
      v-model="queryDialogVisible"
      title="查询申请状态"
      width="30%"
      center
    >
      <div class="query-form">
        <el-form :model="queryForm" :rules="queryRules" ref="queryFormRef">
          <el-form-item prop="phone" label="申请手机号">
            <el-input
              v-model="queryForm.phone"
              placeholder="请输入申请时填写的手机号"
              maxlength="11"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="queryDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleQuery" :loading="querying">
            查询
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Back, Search } from "@element-plus/icons-vue";
import Breadcrumb from "@/components/global/Breadcrumb.vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const merchantType = ref("");

// 查询状态相关
const queryDialogVisible = ref(false);
const queryFormRef = ref(null);
const querying = ref(false);
const queryForm = ref({
  phone: "",
});
const queryRules = {
  phone: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
};

// 显示查询对话框
const showQueryDialog = () => {
  queryDialogVisible.value = true;
  queryForm.value.phone = "";
};

// 处理查询
const handleQuery = async () => {
  if (!queryFormRef.value) return;

  try {
    await queryFormRef.value.validate();
    querying.value = true;

    try {
      // TODO: 替换为实际的API调用
      const response = await fetch("/api/merchant/query-status", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          phone: queryForm.value.phone,
        }),
      });

      const data = await response.json();

      if (data.hasApplication) {
        // 有申请记录，跳转到状态页
        ElMessage.success("查询成功！");
        router.push("/merchant/status");
      } else {
        // 无申请记录
        ElMessage.info("未查询到申请记录");
      }
    } catch (error) {
      console.error("查询失败:", error);
      ElMessage.error("查询失败，请稍后重试");
    } finally {
      querying.value = false;
      queryDialogVisible.value = false;
    }
  } catch (error) {
    // 表单验证失败
    console.error("表单验证失败:", error);
  }
};

const handleTypeSelect = (type) => {
  merchantType.value = type;
  // 跳转到对应的表单页面
  router.push({
    path: `/merchant/apply-form`,
    query: { type },
  });
};

// 检查商家入驻状态
const checkMerchantStatus = async () => {
  try {
    // TODO: 这里替换为实际的API调用
    const response = await fetch("/api/merchant/status");
    const data = await response.json();

    if (data.hasApplication) {
      // 如果已经有申请记录，直接跳转到状态页
      router.replace("/merchant/status");
    }
  } catch (error) {
    console.error("检查商家状态失败:", error);
  }
};

// 设置页面标题并检查商家状态
onMounted(() => {
  document.title = "商家入驻 - 贵港文化旅游平台";
  checkMerchantStatus();
});
</script>

<style lang="scss" scoped>
.merchant-apply-container {
  @apply bg-gray-50 dark:bg-gray-900;

  .page-header {
    @apply mb-0 border-b border-gray-200 dark:border-gray-700;
  }

  .main-content {
    @apply border-t border-gray-200 dark:border-gray-700;
  }

  .content-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700;
  }

  h1,
  h2,
  h3 {
    @apply text-gray-900 dark:text-white;
  }

  label {
    @apply text-gray-700 dark:text-gray-300;
  }

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="time"],
  select,
  textarea {
    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white border-gray-300 dark:border-gray-600;
  }

  button[type="submit"] {
    @apply bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600;
  }

  // 商家类型卡片样式
  .merchant-type-card {
    @apply transition-all duration-300;

    &:hover {
      @apply transform scale-[1.02];
    }

    .icon-wrapper {
      @apply w-12 h-12 bg-blue-100 dark:bg-blue-900/50 rounded-full flex items-center justify-center;
    }

    ul {
      @apply mt-4 space-y-2;
    }
  }

  // 平台优势卡片样式
  .advantage-card {
    @apply bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 text-center transition-all duration-300;

    &:hover {
      @apply transform scale-[1.02] shadow-md;
    }

    .icon-wrapper {
      @apply w-16 h-16 rounded-full mx-auto flex items-center justify-center;

      i {
        @apply text-2xl;
      }
    }
  }

  // 入驻流程样式
  .process-step {
    @apply flex items-start;

    .step-number {
      @apply w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center font-bold mr-4 flex-shrink-0;
    }

    .step-content {
      @apply flex-1;

      .step-title {
        @apply text-gray-900 dark:text-white font-medium mb-1;
      }

      .step-desc {
        @apply text-sm text-gray-600 dark:text-gray-400;
      }
    }
  }
}

// Element Plus 暗色模式适配
:deep(.el-collapse) {
  @apply border-gray-200 dark:border-gray-700;

  .el-collapse-item__header {
    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white;
  }

  .el-collapse-item__content {
    @apply bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400;
  }
}
</style>
